<template>
	<div style="display: flex;">
		<div style="margin-right: 20px;">
			<el-date-picker v-bind="$attrs.startOptions" :disabled-date="startDisabledDate" v-model="startDate" type="date"
				:placeholder="startPlaceholder" />
		</div>
		<div>
			<el-date-picker v-bind="$attrs.endOptions" :disabled-date="endDisabledDate" :disabled="endDateDisabled" v-model="endDate" type="date"
				:placeholder="endPlaceholder" />
		</div>
	</div>
</template>

<script lang="ts" setup name="chooseDate">
	import {
		ref,
		watch
	} from 'vue'

	let props = defineProps({
		startPlaceholder: {
			type: String,
			default: '请选择开始日期'
		},

		endPlaceholder: {
			type: String,
			default: '请选择结束日期'
		},

		// 是否禁用选择今天之前的日期
		disableToday: {
			type: Boolean,
			default: true
		}
	})

	let startDate = ref(null)
	let endDate = ref(null)
	let endDateDisabled = ref(true)


	let startDisabledDate = time => {
		if (props.disableToday) {
			return time.getTime() < Date.now() - 1000 * 60 * 60 * 24
		}
	}

	let endDisabledDate = time => {
		if (startDate.value) {
			return time.getTime() < startDate.value.getTime() + 1000 * 60 * 60 * 24
		}
	}

	watch(() => startDate.value, val => {
		if (!val) {
			endDateDisabled.value = true
			endDate.value = ''
		} else {
			emits('startChange', val)
			endDateDisabled.value = false
		}
	})

	watch(() => endDate.value, val => {
		if (val) {
			emits('endChange', {
				startDate: startDate.value,
				endDate: val
			})
		}
	})

	let emits = defineEmits(['startChange', 'endChange'])
</script>

<style scoped>

</style>
